<!DOCTYPE html>
<html>

<head>
    <title>自动生成目录</title>
    <script>
       window.onload=(function () {
            var toc = document.getElementById("TOC");
            if (!toc) {
                toc = document.createElement("div");
                toc.id = "TOC";
                document.body.insertBefore(toc, document.body.firstChild);
            }

            // Find all section heading elements
            var headings;
            if (document.querySelectorAll) // Can we do it the easy way?
                headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
            else   // Otherwise, find the headings the hard way
                headings = findHeadings(document.body, []);

            // Recursively traverse the document body looking for headings
            function findHeadings(root, sects) {
                for (var c = root.firstChild; c != null; c = c.nextSibling) {
                    if (c.nodeType !== 1) continue;
                    if (c.tagName.length == 2 && c.tagName.charAt(0) == "H")
                        sects.push(c);
                    else
                        findHeadings(c, sects);
                }
                return sects;
            }

            // Initialize an array that keeps track of section numbers.
            var sectionNumbers = [0, 0, 0, 0, 0, 0];

            // Now loop through the section header elements we found.
            for (var h = 0; h < headings.length; h++) {
                var heading = headings[h];

                // Skip the section heading if it is inside the TOC container.
                if (heading.parentNode == toc) continue;

                // Figure out what level heading it is.
                var level = parseInt(heading.tagName.charAt(1));
                if (isNaN(level) || level < 1 || level > 6) continue;

                // Increment the section number for this heading level
                // and reset all lower heading level numbers to zero.
                sectionNumbers[level - 1]++;
                for (var i = level; i < 6; i++) sectionNumbers[i] = 0;

                // Now combine section numbers for all heading levels
                // to produce a section number like 2.3.1.
                var sectionNumber = sectionNumbers.slice(0, level).join(".")

                // Add the section number to the section header title.
                // We place the number in a <span> to make it styleable.
                var span = document.createElement("span");
                span.className = "TOCSectNum";
                span.innerHTML = sectionNumber;
                heading.insertBefore(span, heading.firstChild);

                // Wrap the heading in a named anchor so we can link to it.
                var anchor = document.createElement("a");
                anchor.name = "TOC" + sectionNumber;
                heading.parentNode.insertBefore(anchor, heading);
                anchor.appendChild(heading);

                // Now create a link to this section.
                var link = document.createElement("a");
                link.href = "#TOC" + sectionNumber; // Link destination
                link.innerHTML = heading.innerHTML; // Link text is same as heading

                // Place the link in a div that is styleable based on the level.
                var entry = document.createElement("div");
                entry.className = "TOCEntry TOCLevel" + level;
                entry.appendChild(link);

                // And add the div to the TOC container.
                toc.appendChild(entry);
            }
        });
    </script>
</head>



<body>
    <div >
        <h3>标题一</h3>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <h3> 标题二</h3>
        <h3>标题三</h3>
    </div>



</html>